<style lang='scss'>
body {
  background: linear-gradient(to bottom, #131313 0%, #02101c 100%);
}
#platform {
  position: relative;
  width: 100%;
  height: 100%;

  .sphere-menu {
    position: fixed;
    width: 440px;
    height: 440px;
    display: none;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dotted #4e5061;
    border-radius: 50%;

    & > nav {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(0);
      transition: all 0.5s ease-out;
      opacity: 0;
      & > a {
        position: absolute;
        margin: 0;
        width: 110px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        transform: translate(-50%, -50%);
        text-align: center;

        color: #888;
        display: block;
        font-family: "Cabin", helvetica, arial, sans-serif;
        font-weight: 400;

        text-decoration: none;
        text-shadow: 1px 1px 0px #000;

        background: #222;
        background: linear-gradient(#333, #222);
        border: 1px solid #444;
        border-radius: 5px;
        box-shadow: 0 2px 0 #000;

        &:focus {
          animation: glow 800ms ease-out infinite alternate;
          background: #222922;
          background: linear-gradient(#333933, #222922);
          border-color: #393;
          box-shadow: 0 0 5px rgba(0, 255, 0, 0.2),
            inset 0 0 5px rgba(0, 255, 0, 0.1), 0 2px 0 #000;
          color: #efe;
          outline: none;
        }

        &:hover {
          background: #292929;
          background: linear-gradient(#393939, #292929);
          color: #5f5;
          outline: none;
        }

        &:active {
          background: #292929;
          background: linear-gradient(#393939, #292929);
          box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
          top: 1px;
        }
      }
    }
    &.active nav {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes glow {
    0% {
      border-color: #393;
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.2),
        inset 0 0 5px rgba(0, 255, 0, 0.1), 0 2px 0 #000;
    }
    100% {
      border-color: #6f6;
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.6),
        inset 0 0 10px rgba(0, 255, 0, 0.4), 0 2px 0 #000;
    }
  }

  .meteor-box {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
</style>
<template>
  <div id="platform">
    <div class="meteor-box">
      <canvas id="meteor"></canvas>
    </div>
    <canvas id="js-shoot-star"></canvas>
    <div class="sphere-menu">
      <nav>
        <a v-for="(item,index) in platformArr" :key="index">{{item}}</a>
      </nav>
    </div>
  </div>
</template>
<script>

import { mapGetters } from 'vuex';
import { cookie } from "src/utils/tools";
import fetch from "src/utils/fetch";
export default {
  data() {

    return {
      platformArr: [
        '交易配置平台',
        '联调测试平台',
        '运营平台',
        '监控平台',
      ],
    };
  },
  computed: {},
  mounted() {

    let shootStar = ['meteorIndex.js', 'three.min.js', 'dat.gui.min.js', 'starIndex.js',];

    // 资源路径拼接
    shootStar = shootStar.map((item, index) => {
      let dir = index == 0 ? 'meteor' : 'shootingStar';
      let basePath = `./static/js/${dir}/${item}`;
      return item = location.port == 50001 ? basePath : location.pathname + basePath;
    })



    new Promise((rs, rj) => {
      $.getScript(shootStar[0]).done(() => {
        // 创建彗星背景
        this.renderMeteor();
        rs();
      }).fail(() => rj());

    }).then(() => {
      return new Promise((rs, rj) => {
        $.getScript(shootStar[1]).done(() => rs()).fail(() => rj());
      })
    }).then(() => {
      return new Promise((rs, rj) => {
        $.getScript(shootStar[2]).done(() => rs()).fail(() => rj());
      })
    })
      .then(() => {
        // 绘制鼠标跟随效果
        $.getScript(shootStar[3]).done(() => {
          $(".dg.ac").remove()
        }).fail(() => { });
      })


    window.onresize = () => {
      this.$route.path == '/platform' && this.renderMeteor();
    }



    window.onload = () => {
      window.CONTEXT = this;
      var isLocated = false; //防止重复初始化子菜单位置
      // 不知为什么jQuery绑定的click事件无法响应
      document.querySelector("#js-shoot-star").addEventListener('click', function () {

        $('.sphere-menu').show();
        var isLocated = false; //防止重复初始化子菜单位置
        event.preventDefault();
        // 绘制球状圆形菜单
        var sphereMenu = $('.sphere-menu');
        var nav = sphereMenu.find('nav a');
        if (!sphereMenu.hasClass('active') && !isLocated) {
          //Y=R+Rsinθ
          //X=R+Rcosθ
          var r = sphereMenu.width() / 2;
          var startAngle = 0, endAngle = 360; //可以通过改变角度，做出各种各样的径向菜单

          //子菜单的夹角
          var total = nav.length;
          var gap = (endAngle - startAngle) / total;

          //角度->弧度
          var radian = Math.PI / 180;

          /*
          * 计算并确定各个子菜单的最终位置
          */
          $.each(nav, function (index, el) {
            // 当前子菜单与x轴正向的夹角 θ （角度->弧度）
            var myAngle = (startAngle + gap * index) * radian; // θ
            var x = r + r * Math.cos(myAngle),//myAngle为弧度
              y = r + r * Math.sin(myAngle);
            // 设置当前子菜单的位置 (left,top) = (x,y)
            $(this).css({
              left: x + 'px',
              top: y + 'px'
            });
          });
          isLocated = true;
        }
        sphereMenu.toggleClass('active');

        nav.on('click', function (e) {
          console.log($(this).text());
          cookie.set("isVisitedPlatform", '24h', 24);
          window.CONTEXT.$router.push({ path: '/product' });
        })


      }, false);



    }


  },
  methods: {

    renderMeteor() {
      let WINDOW_WIDTH = document.body.offsetWidth;
      let WINDOW_HEIGHT = document.body.offsetHeight;
      let obj = {
        WINDOW_WIDTH: WINDOW_WIDTH,
        WINDOW_HEIGHT: WINDOW_HEIGHT,
        canvas: '',
        context: '',
        num: 500,
        stars: [],
        rnd: '',
      }
      obj.canvas = document.getElementById('meteor');

      if (obj.canvas) {
        obj.canvas.width = WINDOW_WIDTH;
        obj.canvas.height = WINDOW_HEIGHT;

        obj.context = obj.canvas.getContext('2d');

        addStar(obj);
        setInterval(render.bind(render, obj), 33);
        liuxing(obj);
      }

    },

  }
}
</script>